import React from 'react';
import BaseForm from '../../components/BaseForm'
import ETable from '../../components/ETable'
import { Card, Button } from 'antd';

import Utils from '../../utils/utils';
import { cityList } from '../../api/cityApi'

export default class City extends React.Component{
    state={}
    params={
        page:1
    }
    formList = [
        {
            type:'SELECT',
            label:'城市',
            field:'city',
            placeholder:'全部',
            initialValue:'0',
            width:120,
            list: [{ id: '0', name: '全部' }, { id: '1', name: '北京' }, { id: '2', name: '天津' }, { id: '3', name: '上海' }]
        }, {
            type: 'INPUT',
            label: '姓名',
            field:"name",
            placeholder: '请输入姓名',
            width:120
        },{
            type: 'RangePicker',
            label: '时间段',
            field: ['begin_time', 'end_time'],
            format: 'YYYY-MM-DD',
            width:120
        },{
            type: 'date',
            label: '时间',
            field: 'date',
            format: 'YYYY-MM-DD',
            width:120
        }
    ]
    componentDidMount () {
        this.getTableData(this.params.page)
    }
    // 点击确认触发事件
    handleFilter = (formValue) => {
        formValue.begin_time && (
            formValue.begin_time = Utils.formateDate(formValue.begin_time)
        )
        formValue.end_time && (
            formValue.end_time = Utils.formateDate(formValue.end_time)
        )
        formValue.date && (
            formValue.date = Utils.formateDate(formValue.date)
        )
        this.params = formValue;
        this.getTableData(1)
        console.log('表单提交--', formValue)
    }

    getTableData = (page) => {
        cityList(
            {
                page: page,
                ...this.params
            }
        ).then((res)=>{
            if(res.code === '0') {
                res.data.list.map((item, index) => {
                    return item.key = index;
                })
                this.setState({
                    dataSource:res.data.list,
                    pagination: Utils.pagination(res,(current)=>{
                        this.params.page = current
                        this.getTableData()
                      })
                })
            }
        })
    }
    handleDel = (val) => {
        console.log(val)
    }

    render () {
        const columns = [
            {
                title: '角色ID',
                dataIndex: 'id'
            }, {
                title: '角色名称',
                dataIndex: 'role_name'
            },{
                title: '创建时间',
                dataIndex: 'create_time',
                render: (time)=>Utils.formateDate(time,'YYYY-MM')
            }, {
                title: '使用状态',
                dataIndex: 'status',
                render(status){
                    if (status === 1) {
                        return "启用"
                    } else {
                        return "停用"
                    }
                }
            }, {
                title: '授权时间',
                dataIndex: 'authorize_time',
                render: (time)=>Utils.formateDate(time)
            }, {
                title: '授权人',
                dataIndex: 'authorize_user_name',
            },
            {
                title: '操作', dataIndex: '', key: 'x', render: (text, record) => 
                    <Button onClick={()=>this.handleDel(record)}>Delete</Button>
            }
        ];
        return(
            <div>
                <Card>
                    <BaseForm formList={this.formList} filterSubmit={this.handleFilter} />
                </Card>
                <div className="content-wrap">
                    <ETable
                        rowSelection='checkbox'
                        dataSource={this.state.dataSource}
                        columns={columns}
                        pagination={this.state.pagination}
                    />
                </div>
            </div>
            
        )
    }
    
}